<template>
  <div class="app-container">

    <u-page title="滞纳金节假日维护">
      <div slot="header">
        <el-button type="primary" icon="el-icon-refresh-left" @click="hdlSynchro()">
          同步数据
        </el-button>
      </div>
      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="年份" prop="year">
            <el-select v-model="listQuery.year" placeholder="请选择年份" style="width: 280px">
              <el-option
                v-for="yearstr in years"
                :key="yearstr"
                :label="yearstr"
                :value="yearstr"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="是否休息日" prop="offDay">
            <el-select v-model="listQuery.offDay" placeholder="请选择是否休息" style="width: 280px" clearable>
              <el-option v-for="item in isoffDayList" :key="item.value" :label="item.label" :value="item.value"  />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-edit" style="margin-left: 20px" @click="handleAddHoliday">新增</el-button>
          </el-form-item>
        </el-form>
      </u-filtered>

      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
        @selection-change="hdlSelectChange"
      >
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>
    </u-page>
    <!--  弹窗 -->
    <el-drawer
      title="维护信息"
      :visible.sync="infotable"
      direction="rtl"
      size="50%"
    >
      <div style="margin-top: 5px;padding-left: 10px">
        <el-form ref="formrules" :model="form" :rules="formrules">
          <el-row>
            <el-form-item label="节假日名称" prop="name">
              <el-input v-model="form.name" autocomplete="off" style="width: 200px" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="日期" prop="date">
              <el-date-picker v-model="form.date" width="170" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="是否休息日" prop="isoffday">
              <el-radio-group v-model="form.isoffday">
                <el-radio label="是" />
                <el-radio label="否" />
              </el-radio-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio label="开启" />
                <el-radio label="关闭" />
              </el-radio-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="备注" prop="remark">
              <textarea v-model="form.remark" style="width:80%;height: 150px;" />
            </el-form-item>
          </el-row>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="onSave('formrules')">保存</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      api: this.$u.api.OpcenHoliday,
      // 当前年份
      currentYear: new Date().getFullYear(),
      // 年份
      years: [],
      isoffDayList: [{ value: 0, label: '否' }, { value: 1, label: '是' }],
      infotable: false,
      listOptions: {
        mutiSelect: true,
        stripe: true
      },
      listLoading: false,
      list: [],
      form: {
        id: '',
        updateflag: false,
        date: '',
        name: '',
        isoffday: 1,
        status: 1,
        remark: ''
      },
      formLabelWidth: '80px',
      // 表格
      columns: [
        {
          prop: 'name',
          label: '节假日'
        },
        {
          prop: 'date',
          label: '日期'
        },
        {
          prop: 'remark',
          label: '备注'
        },
        {
          prop: 'isoffday',
          label: '是否休息日',
          render: (h, params) => {
            if (params.row.isoffday === 0) {
              return h('el-tag', { props: { type: 'danger' }}, '否')
            } else if (params.row.isoffday === 1) {
              return h('el-tag', { props: { type: 'success' }}, '是')
            }
          }
        },
        {
          prop: 'status',
          label: '状态',
          render: (h, params) => {
            if (params.row.isoffday === 0) {
              return h('el-tag', { props: { type: 'danger' }}, '关闭')
            } else if (params.row.isoffday === 1) {
              return h('el-tag', { props: { type: 'success' }}, '开启')
            }
          }
        }
      ],
      listQuery: {
        page: 1,
        pageSize: 20,
        totalCount: 1,
        year: '',
        offDay:''
      },
      // 规则
      formrules: {
      }
    }
  },
  mounted() {
    this.generateYearOptions()
  },
  methods: {
    generateYearOptions() {
      const self = this
      self.listQuery.year = self.currentYear
      self.years = Array.from({ length: 6 }, (v, k) => self.currentYear + 1 - k)// 从明年开始向上推5年
    },
    handleAddHoliday() {
      this.form.updateflag = false
      const self = this
      self.infotable = true
    },
    cancelForm() {
      const self = this
      self.infotable = false
    },
    handleFilter() {
      this.hdlFilter()
    },
    // 编辑
    handleEdit(row) {
      const self = this
      self.form = row
      self.infotable = true
      this.form.updateflag = true
    },
    // 删除
    handleDelete(row) {
      const self = this
      self.api.delete(row.id).then(res => {
        // 通知信息
        self.$u.msg('删除成功！')
        this.hdlFilter()
      }).catch(() => {
        self.$u.msg('删除失败，请重试或联系管理员')
        return
      })
    },
    // 保存
    onSave(formName) {
      const self = this
      // 表单验证
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 通过验证进行提交动作
          self.api.save(self.form).then(res => {
            // 通知信息
            self.$u.msg(res.msg)
          }).catch(() => {
            return
          })
        } else {
          return false
        }
      })
    },
    // 同步事件
    hdlSynchro() {
      const self = this
      if (self.listQuery.year === '') {
        self.$message.error('请先选择年份！')
        return
      }
      self.$confirm('此操作将删除【' + self.listQuery.year + '】整年数据是否继续，请谨慎操作？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        self.api.synchro(self.listQuery).then(res => {
          // 同步完成，刷新一下
          self.hdlList()
          self.$alert('同步数据成功', '提示', {
            confirmButtonText: '知道了'
          })
        })
      }).catch(() => {
      })
    }
  }
}
</script>
<style>
.el-select .el-input {
  width: 220px;
}
</style>
<style lang="scss" scoped>
.app-container{
}
</style>
